<template>
  <div>
    <div
      v-if="tabKey === '110' || tabKey === '80'"
      id="components-form-demo-advanced-search"
    >
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          订单编号：<a-input
          :maxLength="128"
            v-model="searchData.applyCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          仓库名称：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehousingId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in clientWareHouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          接收时间：<a-range-picker
            v-model="acTime"
            @change="onStartDateChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getInOrderTabData();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            结算时间：<a-range-picker
              v-model="storageTime"
              @change="onStorageTimeChange"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getInOrderTabData();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div v-if="tabKey === '35'" id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          订单编号：<a-input
          :maxLength="128"
            v-model="searchData.orderNumber"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          客户编号：<a-input :maxLength="128" v-model="searchData.tenantId" style="width: 60%" />
        </a-col>
        <a-col :span="6">
          仓库名称：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehousingId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getOutOrderList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            接收时间：<a-range-picker
              v-model="acTime"
              @change="onStartDateChange"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          结算时间：<a-range-picker
            v-model="storageTime"
            @change="onStorageTimeChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getOutOrderList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <!-- 表格 -->
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="110" @change="callback">
        <a-tab-pane key="110">
          <span slot="tab">
            <a-badge
              :count="
                inOrderTypeCount === null ? 0 : inOrderTypeCount.financialCount
              "
              :offset="[15, 0]"
              >入库结算
            </a-badge>
          </span>
          <OneOrderFinalTable
            :port="port"
            :getInOrderTabData="getInOrderTabData"
            :getInOrderTypeCount="getInOrderTypeCount"
            :inOrderTableData="inOrderTableData"
            v-if="tabKey === '110'"
          />
        </a-tab-pane>
        <a-tab-pane key="80">
          <span slot="tab">
            <a-badge
              :count="
                inOrderTypeCount === null
                  ? 0
                  : inOrderTypeCount.receivedPositionCount
              "
              :offset="[15, 0]"
              >入库历史数据
            </a-badge>
          </span>
          <OneOrderFinalTable
            :getInOrderTabData="getInOrderTabData"
            :getInOrderTypeCount="getInOrderTypeCount"
            :inOrderTableData="inOrderTableData"
            v-if="tabKey === '80'"
          />
        </a-tab-pane>
        <a-tab-pane key="35">
          <span slot="tab">
            <a-badge
              :count="
                outOrderTypeCount === null ? 0 : outOrderTypeCount.shippedCount
              "
              :offset="[15, 0]"
              >出库历史数据
            </a-badge>
          </span>
          <OutOrderFinalTable
            :outOrderTableData="outOrderTableData"
            v-if="tabKey === '35'"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>

    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  pageincoming_order,
  SKU_TypeCount,
} from "@/apis/system/auditCenter/IsCheck";
import { OutOrder_statecount, OutBound_page } from "@/apis/system/WM/OutOrder";
import OneOrderFinalTable from "@/components/system/FinanceManagement/OneOrderFinalTable.vue";
import OutOrderFinalTable from "@/components/system/FinanceManagement/OutOrderFinalTable.vue";
export default {
  props: ["port"],
  components: {
    OneOrderFinalTable,
    OutOrderFinalTable,
  },
  data() {
    return {
      storageTime: null,
      spinning: false,
      acTime: null,
      total: 1,
      searchData: {
        size: 10,
        current: 1,
        applyState: "110",
        applyCode: null,
        tenantId: null,
        warehousingId: null,
        startDate: null,
        endtDate: null,
        settlementStime: null,
        settlementEtime: null,
      },
      expand: false,
      tabKey: "110",
      inOrderTableData: [],
      outOrderTableData: [],
      inOrderTypeCount: [],
      outOrderTypeCount: [],
    };
  },
  created() {
    this.getInOrderTabData();
    this.getInOrderTypeCount();
    this.getOutOrderCount();
    // this.getOutOrderList();
  },
  methods: {
    callback(key) {
      this.searchData.current = 1;
      this.tabKey = key;
      this.searchData.applyState = key;
      if (key === "110" || key === "80") {
        this.getInOrderTabData();
      } else if (key === "35") {
        this.getOutOrderList();
      }
    },
    resetSearch() {
      let current = this.searchData.current;
      let size = this.searchData.size;
      this.searchData = {
        size: size,
        current: current,
        applyState: this.tabKey,
        applyCode: null,
        tenantId: null,
        warehousingId: null,
        startDate: null,
        endtDate: null,
        settlementStime: null,
        settlementEtime: null,
      };
      this.acTime = null;
      this.storageTime = null;
      if (this.tabKey === "110" || this.tabKey === "80") {
        this.getInOrderTabData();
      } else if (this.tabKey === "35") {
        this.getOutOrderList();
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      if (this.tabKey === "110" || this.tabKey === "80") {
        this.getInOrderTabData();
      } else if (this.tabKey === "35") {
        this.getOutOrderList();
      }
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      if (this.tabKey === "110" || this.tabKey === "80") {
        this.getInOrderTabData();
      } else if (this.tabKey === "35") {
        this.getOutOrderList();
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //时间查询
    onStartDateChange(date, dateString) {
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    //结算时间
    onStorageTimeChange(date, dateString) {
      this.searchData.settlementStime = dateString[0];
      this.searchData.settlementEtime = dateString[1];
    },
    //入库表格数据
    async getInOrderTabData() {
      this.spinning = true;
      let { code, responseBody } = await pageincoming_order(this.searchData);
      if (code === "200") {
        this.total = responseBody.total * 1;
        this.inOrderTableData = responseBody.records;
        this.spinning = false;
      }
    },
    //入库红点气泡数据
    async getInOrderTypeCount() {
      let { code, responseBody } = await SKU_TypeCount();
      if (code === "200") {
        this.inOrderTypeCount = responseBody;
      }
    },
    //获取表格数据
    async getOutOrderList() {
      this.spinning = true;
      let { code, responseBody } = await OutBound_page(this.searchData);
      if (code === "200") {
        this.total = responseBody.total * 1;
        this.outOrderTableData = responseBody.records;
        this.spinning = false;
      }
    },
    //获取表头统计
    async getOutOrderCount() {
      let res = await OutOrder_statecount();
      if (res.code === "200") {
        this.outOrderTypeCount =
          res.responseBody === null ? null : res.responseBody;
      }
    },
  },
  computed: {
    ...mapState(["warehouse"]),
    ...mapState(["clientWareHouse"]),
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>